<template>
  <Row> 
    <Col :span="24">
      <Row>
        <Col :span="20">
          <Row>
            <Col :span="24">
              <div ref="toolsdom" class="editor_tools"></div>
            </Col>
            <Col :span="24">
              <div class="editor_content">
                <div class="editor_content_dome">
                  <bubleMenuVue :editor="editor"></bubleMenuVue>
                  <EditorContents :editor="editor"></EditorContents>
                  <TableMenu></TableMenu>
                </div>
              </div>
            </Col>
          </Row>
        </Col>
        <Col :span="4"> 
          <div class="headlist_title">
            <div>目录</div>
          </div>
          <div class="titlelistwarp">
            <div class="headlist"></div>
          </div> 
        </Col>
      </Row>
    </Col> 
  </Row>
</template>

<script setup lang="ts">
import bubleMenuVue from './bubbleMenu/buble-menu.vue';  
import './style.less';
import './theme.less';
import { RenderEditor, EditorContents } from './editor';
import TableMenu from './tabletip.vue';
import { Row, Col  } from 'ant-design-vue';
import {   onMounted, ref } from 'vue';  
const emits = defineEmits(['closemode']); 
const editor = ref(); 
const toolsdom = ref(); 
const editorInstent = ref(); 
const ctreatecontent = ref('');
// 标题 
onMounted(()=>{
  editorInstent.value = RenderEditor({
  editor,
  editable: true,
  toolsele: toolsdom,
  content:'<h2 class="my-custom-heading" id="ha72bc">Saturn</h2><p></p>',
  tools: {
    bold: true,
    italic: true,
    code: true,
    codeBlock: true,
    strike: true,
    separator: true,
    bulletList: true,
    blockquote: true,
    table: true,
    orderedList: true,
    heightlight: true,
    textalgin: true,
    fontfamily: true
  }
},(e:string)=>{
   
  ctreatecontent.value=e 
}); 
})
</script>
<style lang="less" scoped>

.sumbits{
   display: flex;
   align-items: center;
   &>span{
    display: inline-block;
     margin-left: .3rem;
   }
}

.subbtn{
        border: 1px solid #007fff;
        color: #fff;
        background: #007fff;
        border-radius: 3px;
        cursor: pointer;
        padding: 3px 5px;
        &:hover{
             opacity: .8;
        }
        &:active{
             opacity: .8;
        }
  }
.typewaprs {
  display: flex;
  flex-direction: column;
  .clsoes{
     color: #f40;
     display: flex;
    align-items: center;
     margin-left: 10px;
     cursor: pointer;
  }
  .inputs {
    border: 1px solid #60a5fa;
    outline-style: none;
    border-radius: 3px;
    padding: 3px 5px;
  }
 
  .btns{
     background: #0ea5e9;
     color: #fff;
     border: none;
     border-radius: 3px;
     padding: 3px 8px;
     margin-left: 5px;
     cursor: pointer;
     &:active{
         opacity: .8;
     }
  }
  .inputwarp{
    display: flex;
    align-items: center;
  }
  &_createwarp {
    display: flex;
    align-items: center;
  }
  &_create {
    padding: 5px 5px;
  }
  &_title {
    font-weight: bold;
    font-size: 13px;
    margin: 10px 0;
    display: flex;
    align-items: center;
    .swlbabel{
      margin-right: 5px;
      width: 60px;
      display: inline-block;
      text-align: center;
    }
  }
  &_list {
    display: flex;
    flex-direction: row;
    height: 50;
    background: #f8fafc;
    margin: 5px 0;
    padding: 5px 5px;
  }
  &_lists {
    display: flex;
    flex-direction: row;
    padding: 5px 5px;
  }
  .createitems{
    background: #60a5fa;
    border: 1px solid #60a5fa;
    color: #fff;
  }
  &_item {
    &.actives {
      color: #fff;
      background: #007fff;
    }
    padding: 0 5px;
    background: #f0f9ff;
    font-weight: 100;
    font-size: 13px;
    margin-right: 3px;
    border-radius: 3px;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: row;
    color: #60a5fa;
    border: 1px solid #60a5fa;
    font-size: 15px;
    &:hover{
        opacity: .8;
    }
    p {
      padding: 0;
      margin: 0 5px;
      display: inline-block;
    }
  }
}
</style>


